<template>
	<view class="content">
		<scroll-view :scroll-y="true">
			<view class="tz-all">
				<view class="bgtop">
				</view>
				<image v-if="userInfo.avatarUrl" :src="userInfo.avatarUrl" mode="widthFix" class="avatar_user"></image>
				<image v-else src="../../static/avatar.png" mode="widthFix" class="avatar_user" @click="userSet()"></image>
				<view class="user-info" >
					<button class="bun" v-if="userInfo.userName">{{userInfo.userName}}</button>
					<button class="bun" v-else @click="userSet()">设置用户信息</button>
					<view class="breeding_year">
						龟龄: {{userInfo.breedingYear}}
					</view>	
				</view>
				<view v-if="userFeedbackHidden" class="popup_content">
					<view class="popup_title">个人设置</view>
					<view class="popup_textarea_item">
						<input type="text" class="popup_textarea" value=""  v-model="userInfo.userName" placeholder="输入您的昵称"/>

						<div class="inp_box">
							<view class="uni-list">
								<view class="uni-list-cell">
									<view class="uni-list-cell-left">
										何时开始养龟
									</view>
									<view class="uni-list-cell-db">
										<picker mode="date" :value="userInfo.date" :start="startDate" :end="endDate" @change="bindDateChange" fields="month">
											<view class="uni-input date_text">{{userInfo.date}}</view>
										</picker>
									</view>
								</view>
							</view>
						</div>

						<view @click="toSubmit()" class="buttons">
							<text class="popup_button">确定</text>
						</view>
					</view>
				</view>
				<view class="popup_overlay" v-show="userFeedbackHidden" @click="hideDiv()"></view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import tuiLoadmore from '@/components/loadmore/loadmore';
import tuiNomore from '@/components/nomore/nomore';
export default {
	components: {
		tuiLoadmore,
		tuiNomore
	},
	data() {
		const currentDate = this.getDate({
			format: true
		})
		return {
			loginCode: [], // code
			userInfo: {
				userName: "",
				date: currentDate,
				breedingYear: 0,
				openidTEST: "",
			},
			userFeedbackHidden: false,
			nowTime: currentDate,
		};
	},
	computed: {
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		}
	},
	methods: {
		bindDateChange(e) {
			this.userInfo.date = e.detail.value;
			this.userInfo.breedingYear = this.getTurtleYear(this.userInfo.date)
		},
		judgeDate(tomodifyDate){
			return new Date().getTime()-new Date(tomodifyDate).getTime();
		},
		getTurtleYear(date){
			console.log('date',date)
			if(this.judgeDate((date+'-01'))<0){
				uni.showToast({
					duration:3000,
					icon: "none",
					title: "选择日期不能大于当前日期",
				});
				this.userInfo.date = this.getDate({
					format: true
				})
				return ;
			}
			var nowTime = (this.nowTime+'-01').split('-');
			// 得到月数
			nowTime = [parseInt(nowTime[0]),parseInt(nowTime[1])];
			// 拆分年月日
			var theTime = (date+'-01').split('-');
			// 得到月数
			theTime = [parseInt(theTime[0]),parseInt(theTime[1])];
			var y = Math.abs(nowTime[0] - theTime[0]);
			var m = nowTime[1] - theTime[1];
			m = m!=0?`${m}个月`:'';
			y = y!=0?`${y}年`:'';
			return y+m;
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			// let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			// day = day > 9 ? day : '0' + day;
			return `${year}-${month}`;
		},
		/**
		 *  设置用户信息
		 */ 
		userSet() {
			this.userFeedbackHidden = true;
		},
		/**
		 *  关闭弹窗
		 */ 
		hideDiv() {
			this.userFeedbackHidden = false;
		},
		/**
		 *  提交
		 */ 
		toSubmit (){
			this.userFeedbackHidden = false;
			console.log('this.userInfo',this.userInfo)
			uniCloud.callFunction({
				name: 'setUser',
				data: {
					user_name: this.userInfo.userName,
					date: this.userInfo.date,
					breeding_year: this.userInfo.breedingYear,
					user_id: this.userInfo.openidTEST,
				},
				success(res) {
					uni.showToast({
						duration: 2000,
						icon: "success",
						title: "修改成功",
					});
				}
			})
		},
		/**
		 * 获取登录code
		 */
		getLoginCode() {
			const that = this;
			uni.login({
				success(res) { 
					uniCloud.callFunction({
						name: 'loginWithWechat',
						data: {
							js_code: res.code
						},
						success(res) {
							that.userInfo.openidTEST = res.result.data.openid;
							uni.setStorageSync('userId',res.result.data.openid);
							that.getuserInfo();
						}
					})
				}
			})
		},
		getuserInfo(){
			const that = this;
			uniCloud.callFunction({
				name: 'getUser',
				data: {
					user_id: this.userInfo.openidTEST,
				},
				success(res) {
					that.userInfo.userName = res.result.data.data[0].user_name;
					that.userInfo.date = res.result.data.data[0].date;
					that.userInfo.breedingYear = res.result.data.data[0].breeding_year;
				}
			})
		}
	},
	async onLoad() {
		// 获取登录code
		await this.getLoginCode();
	},
};
</script>

<style lang="less">
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	// height: calc(100vh);
	position: relative;
	.back{
		position: fixed;
		top: 20upx;
		left: 20upx;
		width: 70upx;
		height: 70upx;
		z-index: 999;
		&::after{
			content: " ";
			width: 20upx;
			height: 20upx;
			border-top:solid 1px #fff;
			border-right:solid 1px #fff;
			transform: rotate(-135deg);
			position: absolute;
			top:20upx;
			left: 20upx;
		}
	}
	scroll-view {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		height: calc(100vh);
		.tz-all{
			width: 100%;min-height: 100vh;position: relative;
		.bgtop {
			width: 100%;
			height: 330rpx;
			background: #3d836d;
			display: block;
			border-bottom-left-radius: 50rpx;
			border-bottom-right-radius: 50rpx;
			color: #fff;
			padding-left: 100rpx;
		}
		.avatar {
			width: 200rpx;
			position: absolute;
			top: 4upx;
			left: calc(50% - 100upx);
		}
		.avatar_user {
			width: 160rpx;
			position: absolute;
			top: 20upx;
			left: calc(50% - 80upx);
			border-radius: 50%;
		}
		.avatar-con{
			width: 200rpx;
			height: 200rpx;
			border-radius: 50%;
			overflow: hidden;
			position: absolute;
			top: 64upx;
			left: calc(50% - 50upx);
		}
		.user-info {
			color: #fff;
			width: 100%;
			position: absolute;
			top: 170upx;
			left: 0;
			display: flex;
			flex-direction: column;
			text-align: left;
			font-size: 32upx;
			align-items: center;
			.nickname {
				padding-right: 15upx;
				border-right: solid 1px #036260;
				font-weight: bold;
			}
			.phone {
				padding-left: 0;color: #FFFFFF;
				font-weight: bold;
			}
			image {
				width: 20upx;
				margin-left: 10upx;
			}
		}
		.bun {
			width: 250upx;
			background: none;
			border-radius: 50upx;
			color: #fff;
			font-size: 30upx;
			text-align: center;
			margin: 20upx auto;
			line-height: 50upx;
			&::after{
				display: none;
			}
		}
		.buns {
			width: 250upx;
			background: #FF8029;
			border-radius: 50upx;
			color: #fff;
			font-size: 30upx;
			text-align: center;
			margin: 50upx auto;
			line-height: 90upx;
		}
		.blank{
			width: 100%;height: 40upx;
		}
		
		}
	}

	// 弹窗组件
	.popup_overlay {
        position: fixed;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        // z-index: 1001;
        -moz-opacity: 0.8;
        opacity: .80;
        filter: alpha(opacity=88);
    }
     
    .popup_content {
		display: flex;
		flex-direction: column;
		align-content: center;
        position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
        width: 80%;
		height: 500rpx;
		padding-bottom: 30rpx;
		border-radius: 16rpx;
        border: 10px solid white;
		box-sizing: border-box;
        background-color: white;
        z-index: 999;
     
		.popup_title {
			width: 100%;
			text-align: center;
			font-size: 32rpx;
		}
			
		.popup_textarea_item {
			padding-top: 5rpx;
			height: 80rpx;
			border-radius: 10rpx;
			width: 100%;
			background-color: #F1F1F1;
			margin-top: 20rpx;
		}
			
		.popup_textarea {
			width: 100%;
			height: 100%;
			font-size: 26rpx;
			padding-left: 20rpx;
			padding-left: 10px;
		}
			
		.uni-input-placeholder {
			
		}
		.buttons{
			border-radius: 10rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 28rpx;
			margin-top: 40rpx;
			background-color: #036260;
			color: #fff;
		}

		// 时间picker
		.inp_box {
			padding-top: 30rpx;
			.uni-list-cell-left {
				padding-bottom: 10rpx;
			}
			.uni-list-cell-db {
				width: 100%;
				height: 41px;
				line-height: 41px;
				border-radius: 4px;
				border: 1px solid #e5e5e5;
				color: #999;
				padding-left: 10px;
			}
		}

    }
}
</style>
